<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root"></div>


    <!-- 引入依赖 -->
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <!-- babel -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <!-- 编译react代码 -->
    <script type="text/babel">
        /* 点击按钮将界面上的Hello World 改为 Hello React */
        // 获取根节点
        const root = ReactDOM.createRoot(document.querySelector("#root"))

        let message = "Hello World"

        function changeMes() {
            // 通过修改变量 来改变显示文本
            message = "Hello React"
            // 再重新渲染一遍
            renderRoot()
        }
        renderRoot()
        function renderRoot() {
            root.render((
                <div>
                    <h2>{message}</h2>
                    <button onClick={changeMes}>点击变化文本</button>
                </div>
            ))
        }

    </script>
</body>

</html>